<template>
  <div class="blog" ref="blog">
    <div class="container">
      <h3>全部博客</h3>
      <input
        class="search"
        type="text"
        @keyup="debouncedSearch"
        placeholder="搜索"
        v-model="searchVal"
      />
      <ul class="all-blogs" v-if="list&&list.length>0">
        <li v-for="item in list" :key="item.id">
          <blog-list
            :id="item.id"
            :summary="item.summary"
            :date="item.create_time"
            :title="item.title"
            :picture="item.picture"
          ></blog-list>
        </li>
      </ul>
      <bottom-line v-show="isAll"></bottom-line>
    </div>
  </div>
</template>

<script>
import BlogList from "base/blog-list";
import bottomLine from "base/bottom-line";
import lodash from "lodash";
export default {
  data() {
    return {
      pics: [],
      url: "/Essay/article_pagination/",
      searchUrl: "/Essay/search_essay/",
      page: 1,
      num: 20,
      isAll: false,
      searchVal: "",
      list: [],
      blogList: [],
      sw: false //开关
    };
  },
  created() {
    this.debouncedSearch = lodash.debounce(this.search, 1000);
    this.getBlog();
  },
  methods: {
    getBlog() {
      this.$http.get(this.domain + this.url + this.page + "/" + this.num).then(
        res => {
          this.webUtil.getPic(res.data, this.page).then(() => {
            this.blogList = res.data;
            this.list = this.blogList;
            if (this.blogList.length < this.num) {
              this.sw = false;
            } else {
              this.sw = true;
              this.more();
            }
          });
        },
        err => {
          this.$router.push({ path: "/error" });
        }
      );
    },
    more() {
      this.searchVal = this.searchVal.trim();
      window.addEventListener("scroll", () => {
        let disY =
          document.body.offsetHeight - window.scrollY - 81 <=
          window.innerHeight;
        if (this.sw && disY && !this.searchVal) {
          this.page++;
          this.sw = false;
          this.$http
            .get(this.domain + this.url + this.page + "/" + this.num)
            .then(
              res => {
                if (res.data.length > 0) {
                  this.webUtil.getPic(res.data, this.page).then(blog => {
                    this.blogList = this.blogList.concat(blog);
                    this.list = this.blogList;
                    if (res.data.length < this.num) {
                      this.sw = false;
                      this.isAll = true;
                    } else {
                      this.sw = true;
                    }
                  });
                } else {
                  this.isAll = true;
                }
              },
              err => {
                this.$router.push({ path: "/error" });
              }
            );
        }
      });
    },
    search() {
      this.searchVal = this.searchVal.trim();
      if (this.searchVal) {
        this.$http.get(this.domain + this.searchUrl + this.searchVal).then(
          res => {
            if (res.data.length > 0) {
              this.webUtil.getPic(res.data, 5).then(() => {
                this.list = res.data;
              });
            } else {
              this.list = this.blogList;
              alert(
                '没有找到与"' +
                  this.searchVal +
                  '"相关的文章,请尝试使用更宽泛的关键词。'
              );
            }
          },
          res => {
            this.$router.push({ path: "/error" });
          }
        );
      } else {
        this.list = this.blogList;
      }
    }
  },
  components: {
    BlogList,
    bottomLine
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped rel="stylesheet/stylus" lang="stylus"></style>
